<template>
  <div>
    <div class="header">
      <span class="spans">搜索用户数</span>
      <svg
        t="1643271219286"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1581"
        width="26"
        height="26"
      >
        <path
          d="M509.92 795.84c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z m0 48C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m-2.448-400.704h16a16 16 0 0 1 16 16v201.728a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V459.136a16 16 0 0 1 16-16z m0-100.176h16a16 16 0 0 1 16 16v23.648a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-23.648a16 16 0 0 1 16-16z"
          p-id="1582"
          fill="#bfbfbf"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span class="right">12321</span>
      <span
        >17.1
        <svg
          t="1643273006283"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1570"
          width="16"
          height="16"
        >
          <path
            d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
            p-id="1571"
            fill="#d81e06"
          ></path>
        </svg>
        <svg
          t="1643273110929"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2492"
          width="16"
          height="16"
        >
          <path
            d="M941.808046 195.931415 512 828.068585 82.191954 195.931415Z"
            p-id="2493"
            fill="#1296db"
          ></path></svg
      ></span>
    </div>
    <div class="footer">
      <!-- 折线图 -->
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    let myCharts = echarts.init(this.$refs.charts);
    myCharts.setOption({
      xAxis: {
        //   隐藏x轴
        show: false,
        type: "category",
      },
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      //   系列
      series: [
        {
          type: "line",
          data: [12, 35, 56, 32, 67, 45, 23, 5, 66],
          //   折线拐点的样式透明度设置
          itemStyle: {
            opacity: 0,
          },
          //   线条的颜色
          lineStyle: {
            color: "blue",
          },
          // 填充线条区域颜色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
          //   线条平滑的设置
          smooth: true,
        },
      ],
      //   布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.spans {
  margin-right: 20px;
}
.main {
  margin-top: 20px;
}
.right {
  margin-right: 60px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>